import React, {useRef, useEffect, useState} from 'react';
import {createPortal} from 'react-dom';
import './model.css';

const Model = (props) => {
    const [isShowAll, setIsShow] = useState(false);
    // 用于获取该弹窗
    const modelRef = useRef(null);

    function showAl() {
        setIsShow(!isShowAll);
    }

    const [leftx, setLeft] = useState(10);
    const [topy, setTop] = useState(8);
    const showAll = {
        left: "0",
        top: "0",
        width: "100vw",
        height: `${document.body.clientHeight - 50}px`,

    };
    const showHalf = {
        left: `${leftx}%`,
        top: `${topy}%`,
        width: "80vw",
        height: "80vh",
    };

    // 拖拽事件
    const [startx, setStartx] = useState(10);
    const [starty, setStarty] = useState(8);
    const [movex, setMovex] = useState(0);
    const [movey, setMovey] = useState(0);

    function DragStart(e) {
        setZIndex();
        setStartx(e.clientX);
        setStarty(e.clientY);
    }

    function Drag(e) {
        if (e.clientX !== 0) {
            setMovex(e.clientX);
            setMovey(e.clientY);
        }
    }

    useEffect(() => {
        setLeft(endx + ((movex - startx) / window.screen.width) * 100);
        setTop(endy + ((movey - starty) / window.screen.height) * 100);
        // eslint-disable-next-line
    }, [movex, movey]);

    const [endx, setEndx] = useState(10);
    const [endy, setEndy] = useState(8);

    function DragEnd(e) {
        setEndx(endx + (100 * (e.clientX - startx)) / window.screen.width);
        setEndy(endy + (100 * (e.clientY - starty)) / window.screen.height);
    }


    const {children, visible, closeModal, onIsDisplay, isDisplay, topIndex} = props;

    // 在第一次渲染时取 body 原始的 overflow 值
    // eslint-disable-next-line
    const bodyOverflow = useRef(window.getComputedStyle(document.body).overflow);

    useEffect(() => { // 根据 visible 来动态修改 body 的 overflow 值
        if (visible) {
            // eslint-disable-next-line
            document.body.style.overflow = 'hidden';
        } else {
            // eslint-disable-next-line
            document.body.style.overflow = bodyOverflow.current;
        }
    }, [visible]);

    useEffect(() => {
        // 组件销毁时恢复 body 的 overflow 值
        return () => {
            // eslint-disable-next-line
            document.body.style.overflow = bodyOverflow.current;
        }
    }, []);

    // 获取最大zIndex
    const setZIndex = () => {
        if (!window.maxZIndex) {
            window.maxZIndex = 0;
        }
        window.maxZIndex = window.maxZIndex + 1;
        const maxLen = Number(window.maxZIndex) + 1;
        modelRef.current.style.zIndex = maxLen + 1;
    }

    useEffect(() => {
        setZIndex();
    }, [topIndex])
    return <div
        className={isDisplay ? "displayAll border" : "displayNone border"}
        style={isShowAll ? showAll : showHalf}
        ref={modelRef}
        onClick={setZIndex}
    >
        <div
            className="header"
            onDragStart={DragStart}
            onDrag={Drag}
            onDragEnd={DragEnd}
            draggable={true}
        >

            <div id="borderTitle">{props.title}</div>
            <div className="control">
                <span className="showNone" onClick={() => onIsDisplay(false)}>
                    —
                </span>
                <span
                    className="iconfont icon-fangda showAll"
                    onClick={showAl}
                ></span>
                <span className="close" onClick={closeModal}>X</span>
            </div>
        </div>
        <div className="content">{children}</div>
    </div>
};

const Index = (props) => {
    const {visible = false} = props;
    return <>{visible && createPortal(<Model {...props} />, document.body)}</>;
}
export default React.memo(Index);
